<template>
  <div id="task">
    <!-- 顶部导航栏 -->
    <van-nav-bar class="navbar" @click-left="onClickLeft" fixed>
      <template #left>
        <van-icon name="arrow-left" class="left"/>
      </template>
      <template #title>
        <div class="title">{{navbarName}}</div>
      </template>
    </van-nav-bar>
    <div class="all">
      <!-- 悬赏任务列表 -->
      <van-dropdown-menu style="width: 100px;position: absolute;right: 10px;" >
        <van-dropdown-item v-model="value" :options="option"  />
      </van-dropdown-menu>
      <div class="tasks" v-if="value == 0">
        <task-list v-for="(items, index) in profile" :key="index" :items="items" />
      </div>
      <div class="tasks" v-if="value == 1">
        <task-list v-for="(items, index) in sortCount()" :key="index" :items="items" />
      </div>
      <div class="tasks" v-if="value == 2">
        <task-list v-for="(items, index) in sortMoney()" :key="index" :items="items" />
      </div>
    </div>
  </div>
</template>

<script>
import TaskList from '../../components/TaskList'

export default {
  name: 'Task',
  components: {
    TaskList
  },
  data () {
    return {
      value: 0, // 默认排序
      option: [
        { text: '默认排序', value: 0 },
        { text: '好评排序', value: 1 },
        { text: '悬赏金排序', value: 2 },
      ], // 排序下拉选项
      profile: [
        // { imgSrc: "https://img02.sogoucdn.com/net/a/04/link?url=https%3A%2F%2Fi04piccdn.sogoucdn.com%2F9ac7bac37090ca51&appid=122", name: "喵喵1", signature: "我是喵喵1" , money: 13, text: "喵喵1的悬赏内容", textImg: [], sign: "" },
        // { imgSrc: "https://pic2.zhimg.com/80/v2-3d3e5049373fe64a1515ed44e8e82cf0_720w.jpg", name: "汪汪2", signature: "" , money: 20, text: "汪汪2的悬赏内容", textImg: ["https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1258573461,675540319&fm=26&gp=0.jpg"], sign: "" },
        // { imgSrc: "https://pic1.zhimg.com/80/v2-075384f54663ee5cbed086878e2d6a5f_720w.jpg", name: "汪汪汪3", signature: "我是喵喵3~~" , money: 100, text: "喵的鱼很多的鱼", textImg: [], sign: "" },
        // { imgSrc: "https://pic4.zhimg.com/80/v2-40f79711023e6be98d690c47facedbc3_720w.jpg", name: "喵喵妙啊", signature: "我是喵喵4!!!" , money: 1000, text: "汪汪的鱼", textImg: ["https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1886530019,705626552&fm=26&gp=0.jpg", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1258573461,675540319&fm=26&gp=0.jpg"], sign: "" },
        // { imgSrc: "https://pic4.zhimg.com/80/v2-5877eb2a49173872e65e973c3fe42bd5_720w.jpg", name: "汪！！", signature: "我是喵喵5!~!~!~" , money: 0.5, text: "汪汪悬赏任务！！", textImg: ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2836637223,1906326865&fm=26&gp=0.jpg"], sign: "" },
      ], // 发布悬赏任务的用户信息
      navbarName: '2', // 导航栏的标题
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    sortMoney() {
      var _this = this;
        return _this.profile.slice().sort(function(x,y){
        if(x.money < y.money){ 
          return 1;
        }
        if(x.money > y.money){
          return -1;
        }
      })
    },
     sortCount() {
      var _this = this;
        return _this.profile.slice().sort(function(x,y){
        if(x.users.credit_score < y.users.credit_score){ 
          return 1;
        }
        if(x.users.credit_score > y.users.credit_score){
          return -1;
        }
      })
    }
  },
  created(){

      // 这里应该做个判断  通过this.$route.params判断是0短时效，1兼职，2公告，3二手市场
      // swich一下分别四个请求不同数据
    if(this.$route.query.num==1){this.navbarName = '短时效'}
    else if(this.$route.query.num==2){this.navbarName = '兼职'}
    else if(this.$route.query.num==3){this.navbarName = '公告'}
    else if(this.$route.query.num==4){ this.navbarName = '二手市场'}
    let params = new URLSearchParams();
    params.append("id",this.$route.query.num);
    this.axios({
          method: "get",
          url: this.$store.state.url+"/order/get/class",
          params
      }).then((res) => {
        for(var i of res.data.data){
          i.img  = JSON.parse(i.img);
          i.imgCount = Object.keys(i.img);
          for(var t in i.imgCount){
            i.img[t] = "http://picture.105577.xyz/"+ i.img[t];
          }
          i.users.img = "http://picture.105577.xyz/"+ i.users.img;
        }
        this.profile = res.data.data;
      }).catch((err) => {
          console.log(err);
      })
  },
  mounted(){
}
}
</script>

<style scoped>
  .navbar {
    background: #66cd99;
    box-shadow: 0 2px 5px #cccccc;
    color: #ffffff;
  }
  .left {
    color: #fff;
    font-size: 20px
  }
  .title {
    color: #fff;
    font-size: 20px
  }
  .all {
    padding-top: 46px
  }
  .tasks {
    width: 100%;
    padding: 50px 0 0 0;
    margin-bottom: 65px;
    background: #ffffff;
    float: left;
  }
</style>